<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-settings"></i> 系统信息 / 登录日志
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-select v-model="query.role" placeholder="" filterable class="handle-select mr10">
					<el-option key="a" label="全部" value=""></el-option>
					<el-option v-for="(item, index) in roleList" :key="index" :label="item.title" :value="item.id"></el-option>
				</el-select>
				<el-date-picker
					v-model="query.date"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					format="YYYY-MM-DD"
					value-format="YYYY-MM-DD"
					style="margin: 0 10px 15px 0"
				>
				</el-date-picker>
				<el-input v-model="query.search" placeholder="用户昵称" class="handle-input mr10"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleSearch" style="height: 40px">搜索</el-button>
				<el-button icon="el-icon-lx-refresh" @click="refreshPage" :loading="refreshLoading" style="height: 40px">清空条件</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="id" label="UID" width="60" align="center"></el-table-column>
				<el-table-column label="头像" align="center" width="70">
					<template #default="scope">
						<div class="cover" :style="'background-image: url(\''+(scope.row.avatar ? scope.row.avatar.slice(0,4) === 'http' ? scope.row.avatar : config.imgPath + scope.row.avatar : config.imgPath + 'static/eleme/default_avatar.jpg')+'\')'"></div>
					</template>
				</el-table-column>
				<el-table-column prop="username" label="账号" align="center" width="120"></el-table-column>
				<el-table-column prop="realname" label="昵称" align="center" min-width="120"></el-table-column>
				<el-table-column prop="role_name" label="角色" align="center" min-width="120"></el-table-column>
				<el-table-column prop="type_name" label="登录方式" align="center" min-width="120"></el-table-column>
				<el-table-column prop="ip" label="IP" align="center" min-width="150"></el-table-column>
				<el-table-column prop="province" label="登录地点" align="center" min-width="150"></el-table-column>
				<el-table-column prop="login_time" label="登录时间" align="center" min-width="160"></el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination  hide-on-single-page background layout="total, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
import { ref, reactive, defineComponent } from "vue";
export default defineComponent({name:'loginrecord'})
</script>
<script setup>
import Axios from "../../utils/request"
import Methods from "../../utils/Methods";
import {getRoleList} from "../../api/api";
import {ElMessage} from "element-plus";
const query = reactive({
	date: [],
	role: '',
	search: "",
	pageIndex: 1,
	pageSize: 15,
})
const tableData = ref([])
const roleList = ref([])
const pageTotal = ref(0)

const getLoginData = () => {
	query.token = Methods.getLocalStorage('admin_token')
	return Axios.post('/manage/syslog/loginRecord',query)
}
const getRoleData = () => {
	return getRoleList({pageIndex:1,pageSize:100})
}
const getData = () => {
	Promise.all([getLoginData(),getRoleData()]).then(res => {
		let list = res[0].adminlist
		let rolelist = res[1].list
		for(let index in list) {
			list[index].login_time = Methods.formatDate(list[index].create_time)
			for(let rindex in rolelist) {
				if(rolelist[rindex].id === list[index].role) {
					list[index].role_name = rolelist[rindex].title
				}
			}
			switch (list[index].login_type) {
				case 5:
					list[index].type_name = '账号登录'
					break;
				case 2:
					list[index].type_name = '微信扫码登录'
					break;
				default:
					list[index].type_name = list[index].login_type
			}
		}
		tableData.value = list
		roleList.value = res[1].data.list
		pageTotal.value = res[0].data.count
	}).catch(err => {
		console.log(err)
	})
}
getData()
const refreshLoading = ref(false)
const refreshPage = () => {
  query.date = []
  query.role = ''
  query.search = ''
  query.pageIndex = 1
	getData()
}
// 查询操作, 分页导航
const handleSearch = () => {
	query.pageIndex = 1;getData();
};
const handlePageChange = (val) => {
	query.pageIndex = val;getData();
};
</script>
<style scoped lang="scss">
.handle-box {
	margin-bottom: 5px;
	display: flex;
	flex-wrap: wrap;
}
.handle-select {
	width: 150px;
	margin-bottom: 15px;
}
.handle-input {
	width: 300px;
	margin-bottom: 15px;
}
.table {
	width: 100%;
	font-size: 14px;
	.cover {
		width: 44px;
		height: 44px;
		border-radius: 3px;
		background-position: center center;
		background-size: cover;
	}
}
.mr10 {
	margin-right: 10px;
}
</style>
